<template>
    <view :data-theme="globPrimary">
        <u-navbar title="认证讲师"></u-navbar>
        <view class="teacher-wrapper">
            <view class="teacher-view">
                <u-cell-group :border="false">
                    <u-cell-item
                        title="昵称"
                        :value="userInfo.nick_name"
                        :arrow="false"
                        hover-class="none"
                        :value-style="{
                            color: '#606266',
                        }"
                    ></u-cell-item>
                    <u-cell-item
                        title="认证状态"
                        :value="authStatusText"
                        :arrow="false"
                        :border-bottom="false"
                        hover-class="none"
                        :value-style="{
                            color: className[authStatus],
                        }"
                    ></u-cell-item>
                    <u-gap height="10" bg-color="#F7F7F7"></u-gap>
                    <u-cell-item
                        title="所属行业"
                        value="请选择"
                        :border-bottom="false"
                        hover-class="none"
                        @click="show = true"
                    ></u-cell-item>
                    <view class="u-border-bottom category">
                        <view
                            class="item"
                            :style="{ color: globPrimaryColor }"
                            v-for="(item, index) in authInfo.selected_category"
                            :key="index"
                        >
                            <text class="text u-line-1">{{ item.text }}</text>
                        </view>
                    </view>
                    <u-cell-item
                        title="身份证号"
                        :value="authInfo.IDcard"
                        :arrow="false"
                        :border-bottom="false"
                        hover-class="none"
                    ></u-cell-item>
                    <u-cell-item
                        title="身份证正反面"
                        :arrow="false"
                        :border-bottom="false"
                        hover-class="none"
                    ></u-cell-item>
                    <view class="upload">
                        <view class="item"
                            ><u-image
                                width="338rpx"
                                height="213rpx"
                                :src="authInfo.IDcard_positive_url"
                            ></u-image
                        ></view>
                        <view class="item"
                            ><u-image
                                width="338rpx"
                                height="213rpx"
                                :src="authInfo.IDcard_side_url"
                            ></u-image
                        ></view>
                    </view>
                    <u-cell-item
                        title="教师资格证"
                        :arrow="false"
                        :border-bottom="false"
                        hover-class="none"
                    ></u-cell-item>
                    <view class="upload">
                        <view class="item"
                            ><u-image
                                width="338rpx"
                                height="338rpx"
                                :src="authInfo.certification_url"
                            ></u-image
                        ></view>
                    </view>
                </u-cell-group>
            </view>
            <view class="teacher-bottom" v-if="authStatus == 3"
                ><edu-button type="primary" @click="nextStep"
                    >重新提交</edu-button
                ></view
            >
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            className: ["#909399", "#67c23a", "#909399", "#f54030", "#303133"],
            check: true,
            authInfo: {},
            authStatus: 0,
            authStatusText: "",
        };
    },
    mounted() {
        this.getData();
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
    },
    options: { styleIsolation: "shared" },
    methods: {
        getData() {
            this.$edu.api.getUserTeacherAuth().then((res) => {
                const { data } = res;
                this.authInfo = data.auth_info;
                this.authStatus = data.auth_status;
                this.authStatusText = data.auth_status_text;
            });
        },
        // 下一步
        nextStep() {
            this.$u.route({
                type: "redirectTo",
                url: "/pageUser/user/list/operation/teacher/create",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.teacher-wrapper {
    .teacher-view {
        padding-bottom: 20rpx;
        background-color: #ffffff;
        /deep/.u-cell {
            width: calc(100% - 30rpx);
            margin-left: 30rpx;
            padding-left: 0;
            .u-cell_title {
                color: $edu-main-color;
            }
            .u-cell__value {
                color: #b7bac1;
            }
            .u-cell__right-icon-wrap {
                color: #dcdfe6;
            }
        }
        .u-field {
            padding: 29rpx 32rpx;
        }
        .category {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            margin-left: 30rpx;
            padding-right: 30rpx;
            .item {
                display: flex;
                margin-left: 24rpx;
                margin-bottom: 32rpx;
                padding: 5rpx 10px;
                background: #f1f1f1;
                border-radius: 32px;
                font-weight: 400;
                color: $edu-content-color;
                .text {
                    font-size: 26rpx;
                    max-width: 240rpx;
                }
                .close {
                    margin-left: 10rpx;
                    font-size: 18rpx;
                }
            }
        }
        .upload {
            display: flex;
            flex-wrap: wrap;
            padding-left: 20rpx;
            .item {
                padding: 0 10rpx;
            }
            /deep/.u-list-item {
                margin: 0;
            }
        }
    }
    .teacher-bottom {
        padding: 50rpx 30rpx 20rpx;
    }
}
</style>
